<template>
  <div class="container">
    <!-- 头部导航 -->
    <div class="index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">信息修改<i class="el-icon-close"></i></div>
    </div>
    <div class="title">基础信息</div>
    <div class="container-box">
      <h3 class="marginb20">公开信息</h3>
      <div class="content-form">
        <el-form ref="form" :model="form">
          <div class="form-logo marginb20">
            <div class="bg-logo df-c">
              <span class="mr50">店铺logo</span>
              <el-upload
                class="avatar-uploader"
                action="/api/admin/base/uploadfile"
                :show-file-list="false"
                :on-success="handleLogoSuccess"
                :before-upload="beforeLogoUpload"
              >
                <img
                  v-if="form.store_logo"
                  :src="form.store_logo"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>

            <div class="img-logo df-c">
              <span class="mr50">店铺背景图</span>
              <el-upload
                class="avatar-uploader"
                action="/api/admin/base/uploadfile"
                :show-file-list="false"
                :on-success="handleImageSuccess"
                :before-upload="beforeImageUpload"
              >
                <img v-if="form.back_img" :src="form.back_img" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>

          <div class="form-item marginb20">
            <el-form-item label="店铺名称" label-width="80px">
              <el-input
                type="text"
                v-model="form.store_name"
                class="form-item-input"
              ></el-input>
            </el-form-item>
            <!-- <el-button type="text" @click="handleName">申请修改</el-button> -->
          </div>
          <div class="form-item marginb20">
            <el-form-item label="店铺地址" label-width="80px">
              <el-input
                type="text"
                v-model="form.address"
                class="form-item-input"
              ></el-input>
            </el-form-item>
            <!-- <el-button type="text" @click="handleAddress">申请修改</el-button> -->
          </div>
          <div class="form-tel marginb20">
            <el-form-item label="店铺电话" label-width="80px" class="tel-input">
              <el-input type="text" v-model="form.mobile" class=""></el-input>
            </el-form-item>

            <el-form-item label="店铺标签" label-width="80px">
              <el-select
                v-model="tagType"
                @change="getTag"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in shopTagList"
                  :key="item.cate_id"
                  :label="item.cate_name"
                  :value="item.cate_id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="form-time marginb20">
            <el-form-item
              label="运营时间"
              label-width="80px"
              class="service-time"
            >
              <el-time-picker
                is-range
                v-model="servicetime"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                @change="handleTimePicker"
              >
              </el-time-picker>
            </el-form-item>
            <el-form-item label="店铺开业" label-width="80px">
              <el-date-picker
                v-model="form.open_time"
                type="year"
                placeholder="选择年"
                @change="chooseOpenTime"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="form-time marginb20">
            <el-form-item
              label="入驻卖场"
              label-width="80px"
              class="service-time"
            >
              <el-select v-model="form.market_id" disabled placeholder="请选择">
                <el-option
                  v-for="item in marketList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="楼层" label-width="80px" class="service-time">
              <el-select v-model="form.floor" placeholder="请选择">
                <el-option
                  v-for="item in floorList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="form-time marginb20">
            <el-form-item label="单元号" label-width="80px">
              <el-input
                v-model="form.unit_no"
                placeholder="请输入单元号"
              ></el-input>
            </el-form-item>
          </div>
          <div class="form-textarea marginb20">
            <el-form-item label="简介">
              <el-input
                type="textarea"
                rows="5"
                cols="140"
                v-model="form.store_detail"
              ></el-input>
            </el-form-item>
          </div>
          <div class="marginb20">
            <el-form-item label="是否支持配送：">
              <el-radio v-model="is_carry" label="1">是</el-radio>
              <el-radio v-model="is_carry" label="0">否</el-radio>
            </el-form-item>
          </div>
          <div class="df-c">
            <el-button type="primary" class="submit-btn" @click="submit"
              >提交</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import util from "../../uitls/util";

export default {
  data() {
    return {
      sid: null,
      form: {},
      servicetime: [new Date(2021, 3, 5, 8, 40), new Date(2021, 3, 5, 9, 40)], //运营时间
      shopTagList: [],
      tagType: [], //店铺标签
      cate_list: "", //存放店铺标签
      logo_id: "",
      bgimg_id: "",
      is_carry: "1", //配送状态
      marketList: [],
      floorList: [
        {
          name: "8层",
          value: 8,
        },
        {
          name: "7层",
          value: 7,
        },
        {
          name: "6层",
          value: 6,
        },
        {
          name: "5层",
          value: 5,
        },
        {
          name: "4层",
          value: 4,
        },
        {
          name: "3层",
          value: 3,
        },
        {
          name: "2层",
          value: 2,
        },
        {
          name: "1层",
          value: 1,
        },
        {
          name: "-1层",
          value: -1,
        },
        {
          name: "-2层",
          value: -2,
        },
      ],
    };
  },
  mounted() {
    this.sid = localStorage.getItem("sid");
    let params = {
      store_id: this.sid,
    };
    // 获取店铺标签
    this.$api.shopCateOne().then((res) => {
      let cate_lst = res.data;
      // 店铺标签
      this.shopTagList = [...cate_lst];
    });

    // 获取卖场列表
    this.$api.businessList().then((res) => {
      console.log(res, "卖场列表");
      if (res.code == 1) {
        this.marketList = res.data ? res.data : [];
      }
    });

    //获取页面数据
    this.$api.shopStoreDetail(params).then((res) => {
      let { business_start, business_end, cate_lst, open_time } = res.data;
      if (cate_lst.length > 0) {
        var tagTypeList = [];
        cate_lst.forEach((item) => {
          tagTypeList.push(item.cate_id);
        });
        this.cate_list = tagTypeList.toString();
        this.tagType = [...tagTypeList];
        // console.log(this.tagType,"biaoq-----------");
      }
      //店铺运营时间
      // business_start = util.formatDate(+business_start);
      // business_end = util.formatDate(+business_end);
      this.servicetime = [new Date(business_start), new Date(business_end)];
      res.data.business_start = business_start;
      res.data.business_end = business_end;
      res.data.open_time = String(open_time);
      //店铺开业时间
      // this.open_time = String(open_time);
      // console.log(res,'店铺详情');
      this.form = res.data;
      this.logo_id = res.data.store_logo_id;
      this.bgimg_id = res.data.back_img_id;
      this.is_carry = res.data.is_carry.toString();

      console.log("data55", this.form);
    });
  },
  methods: {
    //   上传logo
    handleLogoSuccess(res, file) {
      let logoData = file.response.data;
      this.form.store_logo = logoData.url;
      this.logo_id = logoData.id;
    },
    beforeLogoUpload(file) {
      console.log(file, "shang");
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG或者PNG 格式!");
      }
      // if (!isPNG) {
      //   this.$message.error('上传头像图片只能是 JPG或者PNG 格式!');
      // }

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return (isJPG && isLt2M) || (isPNG && isLt2M);
    },
    // 上传店铺背景图
    handleImageSuccess(res, file) {
      let logoData = file.response.data;
      this.form.back_img = logoData.url;
      this.bgimg_id = logoData.id;
    },
    beforeImageUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG或者PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return (isJPG && isLt2M) || (isPNG && isLt2M);
    },
    //修改店铺名称
    handleName() {
      this.$prompt("请店铺名字1-8位文字", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^([0-9a-zA-Z)|([\u4e00-\u9fa5]){1,8}$/,
        inputErrorMessage: "名字格式不正确",
      })
        .then(({ value }) => {
          let params = {
            store_id: this.sid,
            before_data: this.form.store_name,
            after_data: value,
            key: "store_name ",
          };
          this.$api
            .shopApplyChange(params)
            .then((res) => {
              console.log(res, 66666);
              this.$message({
                type: "success",
                message: "修改成功，等待管理员审核...",
              });
            })
            .catch((err) => {
              this.$message({
                type: "error",
                message: "修改失败",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    //修改店铺地址
    handleAddress() {
      this.$prompt("请店铺地址", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^([0-9a-zA-Z)|([\u4e00-\u9fa5]){1,22}$/,
        inputErrorMessage: "地址格式不正确",
      })
        .then(({ value }) => {
          let params = {
            store_id: this.sid,
            before_data: this.form.address,
            after_data: value,
            key: "store_address ",
          };
          this.$api
            .shopApplyChange(params)
            .then((res) => {
              console.log(res, 66666);
              this.$message({
                type: "success",
                message: "修改成功，等待管理员审核...",
              });
            })
            .catch((err) => {
              this.$message({
                type: "error",
                message: "修改失败",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 获取选中店铺标签
    getTag(value) {
      let valueStr = value.toString();
      this.cate_list = valueStr;
    },
    // 店铺运营时间
    handleTimePicker(dateData) {
      console.log("时间", dateData[0]);
      let business_start = util.formatDate(dateData[0]);
      let business_end = util.formatDate(dateData[1]);
      console.log("时间", business_start, business_end);
      this.form.business_start = business_start;
      this.form.business_end = business_end;
    },
    // 选择开业时间
    chooseOpenTime(v) {
      console.log("开业时间", v);
      let year = util.getYear(v);
      this.form.open_time = String(year);
      console.log("shij", util.getYear(v), typeof this.form.open_time);
    },
    submit() {
      console.log(this.form.store_logo_id, this.form.back_img_id, 999);
      let d = new Proxy(this.form, {});
      const {
        store_id,
        store_logo,
        store_logo_id,
        store_detail,
        back_img,
        store_name,
        back_img_id,
        address,
        cate_list,
        mobile,
        open_time,
        business_start,
        business_end,
        market_id,
        unit_no,
        floor,
      } = d;
      let params = {
        store_id: this.sid,
        store_logo: this.logo_id,
        store_detail: store_detail,
        back_img: this.bgimg_id,
        cate_lst: this.cate_list,
        is_carry: this.is_carry.toString(),
        address: address,
        mobile: mobile,
        store_name: store_name,
        open_time: open_time,
        business_start: business_start,
        business_end: business_end,
        market_id: market_id,
        unit_no: unit_no,
        floor: floor,
      };
      this.$api.storeSave(params).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.marginb20 {
  margin-bottom: 20px;
}
.form-logo {
  padding: 0 10px;
}
.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    font-size: 12px;
    color: #5692fa;
  }
  .el-form-item {
    width: 95%;
  }
}
.content-form .el-form-item {
  margin-bottom: 0 !important;
}
.form-tel {
  display: flex;
  .tel-input {
    width: 27%;
    margin-right: 240px;
  }
}
.form-time {
  display: flex;
}
.service-time {
  margin-right: 100px;
  margin-left: 8px;
}
.form-textarea {
  padding-left: 14px;
  .el-form-item {
    display: flex;
  }
}
.submit-btn {
  margin-top: 50px;
}
//图片上传样式
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
}
.form-logo {
  display: flex;
}
.bg-logo {
  margin-right: 250px;
}
</style>